import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Input, Button, Icon ,message} from 'antd';
import styles from './Login.less';
import docCookies from "../../common/DocCookies";

const FormItem = Form.Item;

@connect(state => ({
  login: state.login,
  messageStatus: state.global.messageStatus,
}))
@Form.create()

export default class Login extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    if (this.props.messageStatus) return; // 弹窗未完全关闭禁止再次提交
    this.props.form.validateFields({ force: true },
      (err, values) => {
        if (!err) {
          this.props.dispatch({
            type: `login/login`,
            payload: values,
            callback:(res) =>{

              const userInfo = res.data;
              if (res.errorCode === 1) {
                  var expires = new Date();
                  expires.setTime(expires.getTime()+7200000);
                  //expires.setTime(expires.getTime()+30000);
                  docCookies.setItem("userId",userInfo.userId,expires);
                  docCookies.setItem("userName",userInfo.nickName,expires);
                  docCookies.setItem("avatar",userInfo.avatar,expires);
                  docCookies.setItem("rsId",userInfo.rsId,expires);
                  docCookies.setItem("token",userInfo.token,expires);
                  docCookies.setItem("logout",false);
                  docCookies.setItem("expiresTime",expires.getTime);
                  this.props.dispatch({
                    type: 'login/fetchShowMenuByRole',
                    payload: {
                      userId:userInfo.userId
                    },
                    callback:(res) =>{
                      if(res.data.length == 0){
                        message.error("登录失败");
                      }else{
                        global.menuData = res.data;
                        for(var i in res.data){
                          if(i == 0) {
                            var _data = res.data[0];
                            docCookies.setItem("menuDefaultOpen",_data.path);
                            var pName = "/"+_data.path;
                            if(_data.children.length != 0){
                              pName += "/" + _data.children[0].path;
                            }
                            docCookies.setItem("mainPage",pName);
                            break;
                          }
                        }
                        message.success("登录成功");
                        this.props.dispatch({
                          type: 'login/loginTo',
                        });
                      }
                    }
                  });
              }

              // 登录失败
              if (res.errorCode === 0) {
                message.error(res.msg)
              }

            }
          });
        }
      }
    );
  }

  render() {
    const { form, login } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={styles['login-form']}>
        <div className={styles['login-logo']}>
          <img alt="" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
          <span>用户登录</span>
        </div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem>
            {getFieldDecorator('username', {
              rules: [{
                required: true, message: '请输入账户名！',
              }],
            })(
              <Input
                prefix={<Icon type="user" className={styles.prefixIcon} />}
                placeholder="用户名"
              />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{
                required: true,
                message: '请输入密码！',
              }],
            })(
              <Input
                prefix={<Icon type="lock" className={styles.prefixIcon} />}
                type="password"
                placeholder="密码"
              />
            )}
          </FormItem>
          <FormItem className={styles.additional}>
            <Button loading={login.submitting} className={styles.submit} type="primary" htmlType="submit">
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
